﻿<!DOCTYPE html>
<html>
<head>
    <!-- Meta-Information -->
    <title>Zawya Admin Panel</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Vendor: Bootstrap 4 Stylesheets  -->
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">

    <!-- Our Website CSS Styles -->
    <link rel="stylesheet" href="css/icons.min.css" type="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <link rel="stylesheet" href="css/responsive.css" type="text/css">

    <!-- Color Scheme -->
    <link rel="stylesheet" href="css/color-schemes/color.css" type="text/css" title="color3">
    <link rel="alternate stylesheet" href="css/color-schemes/color1.css" title="color1">
    <link rel="alternate stylesheet" href="css/color-schemes/color2.css" title="color2">
    <link rel="alternate stylesheet" href="css/color-schemes/color4.css" title="color4">
    <link rel="alternate stylesheet" href="css/color-schemes/color5.css" title="color5">
</head>
<body class="expand-data panel-data">
<div class="topbar">
  <div class="logo">
    <h1><a href="#" title=""><img src="images/logo1.png" alt="" /></a></h1>
  </div>
  <div class="topbar-data">
    <ul class="tobar-links">
      <li><a href="#" title=""><i class="ion-ios-bell"></i><span class="blue-bg">02</span></a>
        <div class="nti-drp-wrp">
          <h5 class="blue-bg"><span>You Have</span> 7 Notifications</h5>
          <div class="nti-lst">
            <div class="nti-usr">
              <span class="brd-rd50 rd-bg"><i class="fa fa-cog"></i></span>
              <div class="nti-usr-inr">
                <h5><a href="#" title="">Sadi Orlaf</a></h5> <span class="pst-tm">Just Now</span>
                <i>Privacy settings changed</i>
              </div>
            </div>
            <div class="nti-usr">
              <span class="brd-rd50 drkblu-bg"><i class="ion-ios-personadd"></i></span>
              <div class="nti-usr-inr">
                <h5><a href="#" title="">Katti Smith</a></h5> <span class="pst-tm">Just Now</span>
                <i>Mike has added you as friend</i>
              </div>
            </div>
            <div class="nti-usr">
              <span class="brd-rd50 orng-bg"><i class="ion-thumbsup"></i></span>
              <div class="nti-usr-inr">
                <h5><a href="#" title="">Willimes Domson</a></h5> <span class="pst-tm">Just Now</span>
                <i>like your timeline photo</i>
              </div>
            </div>
            <div class="nti-usr">
              <span class="brd-rd50 grn-bg"><i class="ion-information-circled"></i></span>
              <div class="nti-usr-inr">
                <h5><a href="#" title="">Holli Doe</a></h5> <span class="pst-tm">Just Now</span>
                <i>Curabitur id eros limes suscipit blandit.</i>
              </div>
            </div>
          </div>
          <div class="nt-ftr"><a href="#" title="">View All</a></div>
        </div>
      </li>
      <li><a href="#" title=""><i class="ion-android-drafts"></i><span class="green-bg">10</span></a>
        <div class="nti-drp-wrp">
          <h5 class="green-bg"><span>You Have</span> 7 New Messages</h5>
          <div class="nti-lst">
            <div class="nti-usr">
              <img class="brd-rd50" src="images/resource/acti-thmb2.jpg" alt="" />
              <div class="nti-usr-inr">
                <h5><a href="#" title="">Sadi Orlaf</a></h5> <span class="pst-tm">Just Now</span>
                <i>Privacy settings changed</i>
              </div>
            </div>
            <div class="nti-usr">
              <img class="brd-rd50" src="images/resource/acti-thmb1.jpg" alt="" />
              <div class="nti-usr-inr">
                <h5><a href="#" title="">Katti Smith</a></h5> <span class="pst-tm">Just Now</span>
                <i>Mike has added you as friend</i>
              </div>
            </div>
            <div class="nti-usr">
              <img class="brd-rd50" src="images/resource/acti-thmb3.jpg" alt="" />
              <div class="nti-usr-inr">
                <h5><a href="#" title="">Willimes Domson</a></h5> <span class="pst-tm">Just Now</span>
                <i>like your timeline photo</i>
              </div>
            </div>
            <div class="nti-usr">
              <img class="brd-rd50" src="images/resource/acti-thmb4.jpg" alt="" />
              <div class="nti-usr-inr">
                <h5><a href="#" title="">Holli Doe</a></h5> <span class="pst-tm">Just Now</span>
                <i>Curabitur id eros limes suscipit blandit.</i>
              </div>
            </div>
          </div>
          <div class="nt-ftr"><a href="#" title="">View All</a></div>
        </div>
      </li>
      <li><a href="#" title=""><i class="ion-android-settings"></i></a>
        <div class="set-lst">
          <div class="set-bd">
            <h4>General Settings</h4>
            <ul class="sett-lst">
              <li>
                <span class="chck-bx">
                    <input id="set1" type="checkbox">
                    <label for="set1">Report Panel Usage</label>
                </span>
                <i>General Settings information</i>
              </li>
              <li>
                <span class="chck-bx">
                    <input id="set2" type="checkbox">
                    <label for="set2">Mail Redirect</label>
                </span>
                <i>General Settings information</i>
              </li>
              <li>
                <span class="chck-bx">
                    <input id="set3" type="checkbox">
                    <label for="set3">Expose Author Name</label>
                </span>
                <i>General Settings information</i>
              </li>
            </ul>
            <h4>Chat Settings</h4>
            <ul>              
              <li>
                <span class="chck-bx">
                    <input id="set4" type="checkbox">
                    <label for="set4">Show Me As Online</label>
                </span>
              </li>              
              <li>
                <span class="chck-bx">
                    <input id="set5" type="checkbox">
                    <label for="set5">Turn Off Notifications</label>
                </span>
              </li>
            </ul>
          </div>
          <div class="set-ft">
            <a class="btn-danger" href="#" title=""><i class="fa fa-trash"></i> Delete Chat History</a>
          </div>
        </div>
      </li>
      <li><a href="#" title=""><i class="ion-android-contacts"></i></a>
        <div class="cnt-lst">
          <ul>
            <li>
              <div class="usr">
                <img class="brd-rd50" src="images/resource/acti-thmb1.jpg" alt="" />
                <div class="usr-innr">
                  <h5><a href="#" title="">Smith Doe</a></h5>
                  <span>Co Worker</span>
                  <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
                </div>
              </div>
            </li>
            <li>
              <div class="usr">
                <img class="brd-rd50" src="images/resource/acti-thmb2.jpg" alt="" />
                <div class="usr-innr">
                  <h5><a href="#" title="">Katti Smith</a></h5>
                  <span>Graphic Designer</span>
                  <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
                </div>
              </div>
            </li>
            <li>
              <div class="usr">
                <img class="brd-rd50" src="images/resource/acti-thmb3.jpg" alt="" />
                <div class="usr-innr">
                  <h5><a href="#" title="">Willimes Domson</a></h5>
                  <span>Family Adviser</span>
                  <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
                </div>
              </div>
            </li>
            <li>
              <div class="usr">
                <img class="brd-rd50" src="images/resource/acti-thmb4.jpg" alt="" />
                <div class="usr-innr">
                  <h5><a href="#" title="">Holli Doe</a></h5>
                  <span>Company CEO</span>
                  <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <form class="topbar-search">
      <button type="submit"><i class="ion-ios-search-strong"></i></button>
      <input type="text" placeholder="Type and Hit Enter" />
    </form>
    <div class="usr-act">
      <span><img src="images/resource/topbar-usr1.jpg" alt="" /><i class="sts away"></i></span>
      <div class="usr-inf">
        <div class="usr-thmb brd-rd50">
          <img class="brd-rd50" src="images/resource/usr.jpg" alt="" />
          <i class="sts away"></i>
          <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
        </div>
        <h5><a href="#" title="">John Smith</a></h5>
        <span>Co Worker</span>
        <i>076 9477 4896</i>
        <div class="act-pst-lk-stm">
          <a class="brd-rd5 green-bg-hover" href="#" title=""><i class="ion-heart"></i> Love</a>
          <a class="brd-rd5 blue-bg-hover" href="#" title=""><i class="ion-forward"></i> Reply</a>
        </div>
        <div class="usr-ft">
          <a class="btn-danger" href="#" title=""><i class="fa fa-sign-out"></i> Logout</a>
        </div>
      </div>
    </div>
  </div>
  <div class="topbar-bottom-colors">
    <i style="background-color: #2c3e50;"></i>
    <i style="background-color: #9857b2;"></i>
    <i style="background-color: #2c81ba;"></i>
    <i style="background-color: #5dc12e;"></i>
    <i style="background-color: #feb506;"></i>
    <i style="background-color: #e17c21;"></i>
    <i style="background-color: #bc382a;"></i>
  </div>
</div><!-- Topbar -->

<header class="side-header light-skin expand-header">
  <div class="nav-head">Main Navigation <span class="menu-trigger"><i class="ion-android-menu"></i></span></div>
  <nav class="custom-scrollbar">
    <ul class="drp-sec">
      <li class="has-drp"><a href="#" title=""><i class="ion-home"></i> <span>Dashboard</span></a>
        <ul class="sb-drp">
          <li><a href="index.html" title="">Dashboard 1</a></li>
          <li><a href="dashboard2.html" title="">Dashboard 2</a></li>
          <li><a href="dashboard3.html" title="">Dashboard 3</a></li>
        </ul>
      </li>
    </ul>
    <h4>Features</h4>
    <ul class="drp-sec">
      <li class="has-drp"><a href="#" title=""><i class="ion-briefcase"></i> <span>UI Elements</span></a>
        <ul class="sb-drp">
          <li><a href="pricing-plan.html" title="">Pricing Plan</a></li>
          <li><a href="grids.html" title="">Grids</a></li>
          <li><a href="calendar.html" title="">Calendar</a></li>
          <li><a href="pagination.html" title="">Pagination</a></li>
          <li><a href="buttons.html" title="">Button Styles</a></li>
          <li><a href="dropdowns.html" title="">Dropdown Styles</a></li>
          <li><a href="tabs&accordians.html" title="">Tabs & Accordians</a></li>
          <li><a href="progressbars.html" title="">Progress Bars</a></li>
          <li><a href="tooltips.html" title="">Tooltips</a></li>
          <li><a href="popovers.html" title="">Popovers</a></li>
          <li><a href="alerts.html" title="">Alerts</a></li>
          <li><a href="list-group.html" title="">List Group</a></li>
          <li><a href="models.html" title="">Models</a></li>
          <li><a href="loaders.html" title="">CSS Loaders</a></li>
          <li><a href="cards.html" title="">Cards</a></li>
          <li><a href="range-slider.html" title="">Range Slider</a></li>
        </ul>
      </li>
      <li class="has-drp"><a href="#" title=""><i class="ion-fireball"></i> <span>Icons</span></a>
        <ul class="sb-drp">
          <li><a href="font-awesome-icons.html" title="">Font Awesome Icons</a></li>
          <li><a href="themify-icons.html" title="">Themify Icons</a></li>
          <li><a href="ionicons.html" title="">Ionicons</a></li>
        </ul>
      </li>
      <li class="has-drp"><a href="#" title=""><i class="ion-images"></i> <span>Gallery Styles</span></a>
        <ul class="sb-drp">
          <li><a href="gallery1.html" title="">Gallery Style 1</a></li>
          <li><a href="gallery2.html" title="">Gallery Style 2</a></li>
          <li><a href="gallery3.html" title="">Gallery Style 3</a></li>
        </ul>
      </li>
      <li class="has-drp"><a href="#" title=""><i class="ion-android-settings"></i> <span>Form Stuff</span></a>
        <ul class="sb-drp">
          <li><a href="form-layouts.html" title="">Form Layouts</a></li>
          <li><a href="form-wizard.html" title="">Form Wizard</a></li>
        </ul>
      </li>
      <li><a href="tables.html" title=""><i class="ion-crop"></i> Tables</a></li>
      <li><a href="charts.html" title=""><i class="ion-podium"></i> Charts</a></li>
    </ul>
    <h4>Pages</h4>
    <ul class="drp-sec">
      <li class="has-drp"><a href="#" title=""><i class="ion-android-clipboard"></i> <span>General</span></a>
        <ul class="sb-drp">
          <li><a href="404.html" title="">404</a></li>
          <li><a href="505.html" title="">505</a></li>
          <li><a href="contact.html" title="">Contact Us</a></li>
          <li><a href="coming-soon.html" title="">Coming Soon</a></li>
          <li><a href="under-maintenance.html" title="">User Maintenance</a></li>
          <li><a href="login.html" title="">Login</a></li>
          <li><a href="register.html" title="">Register</a></li>
          <li><a href="search-result.html" title="">Search Result</a></li>
          <li><a href="faq.html" title="">Faq's</a></li>
          <li><a href="services.html" title="">Services</a></li>
          <li><a href="invoice.html" title="">Invoice Page</a></li>
          <li><a href="typography.html" title="">Typography</a></li>
          <li><a href="live-chat.html" title="">Live Chat</a></li>
          <li><a href="timeline.html" title="">Timeline</a></li>
          <li><a href="cropbox.html" title="">Cropbox</a></li>
          <li><a href="calculator.html" title="">Calculator</a></li>
        </ul>
      </li>
      <li class="has-drp"><a href="#" title=""><i class="ion-android-contact"></i> <span>User</span></a>
        <ul class="sb-drp">
          <li><a href="profile.html" title="">Profile Page</a></li>
          <li><a href="profile-edit.html" title="">Profile Edit</a></li>
        </ul>
      </li>
      <li class="has-drp"><a href="#" title=""><i class="ion-bag"></i> <span>eCommerce</span></a>
        <ul class="sb-drp">
          <li><a href="products.html" title="">Products</a></li>
          <li><a href="product-details.html" title="">Product Details</a></li>
          <li><a href="checkout.html" title="">Checkout</a></li>
          <li><a href="order-received.html" title="">Order Received</a></li>
        </ul>
      </li>
      <li class="has-drp"><a href="#" title=""><i class="ion-android-map"></i> <span>Maps</span></a>
        <ul class="sb-drp">
          <li><a href="google-map.html" title="">Google Map</a></li>
          <li><a href="vector-map.html" title="">Vector map</a></li>
        </ul>
      </li>
      <li class="has-drp"><a href="#" title=""><i class="ion-email"></i> <span>Email's</span></a>
        <ul class="sb-drp">
          <li><a href="email-composer.html" title="">Email Compose</a></li>
          <li><a href="inbox.html" title="">Inbox</a></li>
          <li><a href="email.html" title="">Email</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header><!-- Side Header -->

<div class="option-panel">
  <span class="panel-btn"><i class="fa ion-android-settings fa-spin"></i></span>
  <div class="color-panel">
    <h4>Text Color</h4>
    <span class="color1" onclick="setActiveStyleSheet('color1'); return false;"><i></i></span>
    <span class="color2" onclick="setActiveStyleSheet('color2'); return false;"><i></i></span>
    <span class="color3" onclick="setActiveStyleSheet('color'); return false;"><i></i></span>
    <span class="color4" onclick="setActiveStyleSheet('color4'); return false;"><i></i></span>
    <span class="color5" onclick="setActiveStyleSheet('color5'); return false;"><i></i></span>
  </div>
</div><!-- Options Panel -->
<div class="pg-tp">
    <i class="ion-cube"></i>
    <div class="pr-tp-inr">
        <h4>Welcome to <strong>ZAWYA</strong><span></span> Panel</h4>
        <span>Admin Template for medium and large web applications with ery clean and aesthetic style.</span>
    </div>
</div><!-- Page Top -->

<div class="panel-content">
    <div class="filter-items">
        <div class="row grid-wrap mrg20">
            <div class="col-md-6 grid-item col-sm-12 col-lg-6">
                <div class="row mrg20">
                    <div class="col-md-6 col-sm-6 col-lg-6">
                        <div class="stat-box widget bg-clr5 style2">
                            <div class="wdgt-opt">
                                <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                                <div class="wdgt-opt-lst brd-rd5">
                                    <a class="delt-wdgt" href="#" title="">Delete</a>
                                    <a class="expnd-wdgt" href="#" title="">Expand</a>
                                    <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                                </div>
                            </div>
                            <div class="wdgt-ldr">
                                <div class="ball-scale-multiple">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                            <i class="ion-cube"></i>
                            <div class="stat-box-innr">
                                <span>$ <i class="counter">1,206,90</i></span>
                                <h5>Total Revenue</h5>
                            </div>
                            <span><i class="ion-ios-stopwatch"></i> Updated: 05:14pm</span>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 col-lg-6">
                        <div class="stat-box widget bg-clr6 style2">
                            <div class="wdgt-opt">
                                <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                                <div class="wdgt-opt-lst brd-rd5">
                                    <a class="delt-wdgt" href="#" title="">Delete</a>
                                    <a class="expnd-wdgt" href="#" title="">Expand</a>
                                    <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                                </div>
                            </div>
                            <div class="wdgt-ldr">
                                <div class="ball-scale-multiple">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                            <i class="ion-bag"></i>
                            <div class="stat-box-innr">
                                <span>$ <i class="counter">20,507</i></span>
                                <h5>Online Revenue</h5>
                            </div>
                            <span><i class="ion-ios-stopwatch"></i> Updated: 05:14pm</span>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 col-lg-6">
                        <div class="stat-box widget bg-clr7 style2">
                            <div class="wdgt-opt">
                                <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                                <div class="wdgt-opt-lst brd-rd5">
                                    <a class="delt-wdgt" href="#" title="">Delete</a>
                                    <a class="expnd-wdgt" href="#" title="">Expand</a>
                                    <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                                </div>
                            </div>
                            <div class="wdgt-ldr">
                                <div class="ball-scale-multiple">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                            <i class="ion-speedometer"></i>
                            <div class="stat-box-innr">
                                <span><i class="counter">79</i> GB</span>
                                <h5>Bandwidth Usage</h5>
                            </div>
                            <span><i class="ion-ios-stopwatch"></i> Updated: 05:14pm</span>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 col-lg-6">
                        <div class="stat-box widget bg-clr8 style2">
                            <div class="wdgt-opt">
                                <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                                <div class="wdgt-opt-lst brd-rd5">
                                    <a class="delt-wdgt" href="#" title="">Delete</a>
                                    <a class="expnd-wdgt" href="#" title="">Expand</a>
                                    <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                                </div>
                            </div>
                            <div class="wdgt-ldr">
                                <div class="ball-scale-multiple">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                            <i class="ion-ios-cloud-download"></i>
                            <div class="stat-box-innr">
                                <span><i class="counter">5347</i></span>
                                <h5>Download Count</h5>
                            </div>
                            <span><i class="ion-ios-stopwatch"></i> Updated: 05:14pm</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 grid-item col-sm-12 col-lg-6">
                <div class="widget sales-summ pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <h4 class="widget-title">Sales Difference</h4>
                    <div id="chrt1" style="height: 260px;"></div>
                </div>
            </div>
            <div class="col-md-12 grid-item col-sm-12 col-lg-12">
                <div class="widget prd-wdgt pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <div class="table-wrap">
                        <table class="table style2 style3">
                            <thead class="table-inverse">
                                <tr>
                                    <th><span>#</span></th>
                                    <th><span>Image</span></th>
                                    <th><span>Product Name</span></th>
                                    <th><span>Product Code</span></th>
                                    <th><span>Purchased on</span></th>
                                    <th><span>Status</span></th>
                                    <th><span>Price</span></th>
                                    <th><span>QTY</span></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><span class="blue-bg indx">01</span></td>
                                    <td><img class="brd-rd5" src="images/resource/prd-img1.jpg" alt="" /></td>
                                    <td><h4><a href="#" title="">Black Jacket</a></h4></td>
                                    <td><span>4ABSD58</span></td>
                                    <td><span>10 June 2017</span></td>
                                    <td><span class="badge badge-success brd-rd5">Pending</span></td>
                                    <td><span class="prc">$99.98</span></td>
                                    <td><span>01</span></td>
                                </tr>
                                <tr>
                                    <td><span class="blue-bg indx">02</span></td>
                                    <td><img class="brd-rd5" src="images/resource/prd-img2.jpg" alt="" /></td>
                                    <td><h4><a href="#" title="">Cannon LA Camera</a></h4></td>
                                    <td><span>4OCSD51</span></td>
                                    <td><span>15 June 2017</span></td>
                                    <td><span class="badge badge-info brd-rd5">Process</span></td>
                                    <td><span class="prc">$458.98</span></td>
                                    <td><span>03</span></td>
                                </tr>
                                <tr>
                                    <td><span class="blue-bg indx">03</span></td>
                                    <td><img class="brd-rd5" src="images/resource/prd-img3.jpg" alt="" /></td>
                                    <td><h4><a href="#" title="">LR Head Phones</a></h4></td>
                                    <td><span>4ABSD60</span></td>
                                    <td><span>19 June 2017</span></td>
                                    <td><span class="badge badge-warning brd-rd5">Failed</span></td>
                                    <td><span class="prc">$99.98</span></td>
                                    <td><span>01</span></td>
                                </tr>
                                <tr>
                                    <td><span class="blue-bg indx">04</span></td>
                                    <td><img class="brd-rd5" src="images/resource/prd-img4.jpg" alt="" /></td>
                                    <td><h4><a href="#" title="">Watch RA Duble</a></h4></td>
                                    <td><span>4OCSD68</span></td>
                                    <td><span>20 June 2017</span></td>
                                    <td><span class="badge badge-info brd-rd5">Process</span></td>
                                    <td><span class="prc">$199.98</span></td>
                                    <td><span>03</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-6 grid-item col-sm-12 col-lg-6">
                <div class="widget usr-msgs pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <h4 class="widget-title">Message</h4>
                    <div class="msgs-lst">
                        <div class="msg-itm">
                            <span class="brd-rd50" style="background-color: #26c6da;color: #ffffff;">S <i class="sts away"></i></span>
                            <div class="msg-inf">
                                <h5>Sunil Joshi -</h5> <span class="pst-tm">12:00pm</span>
                                <div class="msg">
                                    <p>That's awesome!</p>
                                </div>
                            </div>
                        </div>
                        <div class="msg-itm">
                            <span class="brd-rd50" style="background-color: #26c6da;color: #ffffff;"><img class="brd-rd50" src="images/resource/acti-thmb2.jpg" alt="" /> <i class="sts online"></i></span>
                            <div class="msg-inf">
                                <h5>Bvesh Patel -</h5> <span class="pst-tm">01:00am</span>
                                <div class="msg">
                                    <p>That's awesome!</p>
                                </div>
                            </div>
                        </div>
                        <div class="msg-itm">
                            <span class="brd-rd50" style="background-color: #26c6da;color: #ffffff;">N <i class="sts dont-dstrb"></i></span>
                            <div class="msg-inf">
                                <h5>Nirva Joshi -</h5> <span class="pst-tm">08:40pm</span>
                                <div class="msg">
                                    <p>That's awesome!</p>
                                </div>
                            </div>
                        </div>
                        <div class="msg-itm">
                            <span class="brd-rd50" style="background-color: #26c6da;color: #ffffff;">J <i class="sts online"></i></span>
                            <div class="msg-inf">
                                <h5>Jonathan -</h5> <span class="pst-tm">12:00pm</span>
                                <div class="msg">
                                    <p>That's awesome!</p>
                                </div>
                            </div>
                        </div>
                        <div class="vw-mr"><a href="#" title="">View More</a></div>
                    </div>
                </div>
            </div>
            <!-- <div class="col-md-4 grid-item col-sm-12 col-lg-4">
                <div class="widget wethr-wdgt">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <div id="wethr"></div>
                </div>
            </div> -->
            <div class="col-md-6 grid-item col-sm-12 col-lg-6">
                <div class="widget pst-wdgt pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <div class="pst-itm">
                        <div class="pst-inf">
                            <div class="cat-btns">
                                <a href="#" title="" class="blue-bg brd-rd5">Business</a>
                                <a href="#" title="" class="green-bg brd-rd5">Dreams</a>
                            </div>
                            <h4><a href="#" title="">Grace is the beauty of form under the influence</a></h4>
                            <i>August 11, 2017</i>
                        </div>
                        <div class="pst-img" style="background-image: url(images/resource/pst-img1.jpg);"></div>
                        <p>Aenean massa. Cum sociis natoque penatibusm nis dis parturient montes, nascetur ridiculusmus Penatibus et magnis dis parturient montes, nasc etur ridiculus mus.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 grid-item col-sm-12 col-lg-6">
                <div class="widget vctr-map pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <h4 class="widget-title">Visitors Map</h4>
                    <div class="vc-map" id="vc-map"></div>
                </div>
            </div>
            <div class="col-md-6 grid-item col-sm-12 col-lg-6">
                <div class="widget polr-chrt pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <h4 class="widget-title">Highcharts Polar Chart</h4>
                    <div id="chart2" style="height: 300px;"></div>
                </div>
            </div>
            <div class="col-md-4 grid-item col-sm-12 col-lg-4">
                <div class="widget insta-usr pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <div class="insta-wrp">
                        <span><img class="brd-rd50" src="images/resource/insta-dp.jpg" alt="" /><span class="sts online"></span></span>
                        <div class="insta-inf">
                            <h2><a href="#" title="">John Smith</a></h2>
                            <span class="desg">Product Manager <a class="blue-clr" href="#" title="">@GraphicXspace</a></span>
                            <span class="adrs"><i class="fa fa-map-marker blue-clr"></i> Charlotte, NC</span>
                            <div class="prf-btns">
                                <a href="#" title="" class="blue-bg brd-rd5"><i class="fa fa-check"></i> Following</a>
                                <a href="#" title="" class="green-bg brd-rd5"><i class="fa fa-envelope-o"></i> Message</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 grid-item col-sm-12 col-lg-4">
                <div class="widget fb-usr pad50-40 fb-bg">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <div class="scl-msg-wrp">
                        <p>Ut harum ipsam molestias maxime non nisi re iendis eligendi! Doloremque quia pariatur har ea amet quibusdam quisquam, quae, tempori dolores porro doloribus.</p>
                        <i class="fa fa-facebook-square"></i>
                        <div class="scl-msg-inf">
                            <img class="brd-rd50" src="images/resource/fb-dp.jpg" alt="" />
                            <div class="scl-msg-inr">
                                <h2><a href="#" title="">John Smith</a></h2>
                                <a href="#" title="">GraphicXspace</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>            
            <div class="col-md-4 grid-item col-sm-12 col-lg-4">
                <div class="widget twtr-usr pad50-40 twtr-bg">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <div class="scl-msg-wrp">
                        <p>Ut harum ipsam molestias maxime non nisi re iendis eligendi! Doloremque quia pariatur har ea amet quibusdam quisquam, quae, tempori dolores porro doloribus. Consequuntur aspern atur at, eaque hic repellendus sit dicta consequ atur quae. </p>
                        <i class="fa fa-twitter"></i>
                        <div class="scl-msg-inf">
                            <img class="brd-rd50" src="images/resource/twtr-dp.jpg" alt="" />
                            <div class="scl-msg-inr">
                                <h2><a href="#" title="">Elon Musk</a></h2>
                                <a href="#" title="">@GraphicDesigner</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- Filter Items -->
    </div>
</div><!-- Panel Content -->
<footer>
  <p>Copyright <a href="http://www.bootstrapmb.com" title="">Example Company</a> &amp; 2017 - 2018</p>
  <span>10GB of 250GB Free.</span>
</footer>


<!-- Vendor: Javascripts -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<!-- Vendor: Followed by our custom Javascripts -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/select2.min.js" type="text/javascript"></script>
<script src="js/slick.min.js" type="text/javascript"></script>

<!-- Our Website Javascripts -->
<script src="js/isotope.min.js" type="text/javascript"></script>
<script src="js/isotope-int.js" type="text/javascript"></script>
<script src="js/jquery.counterup.js" type="text/javascript"></script>
<script src="js/waypoints.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script src="js/exporting.js" type="text/javascript"></script>
<script src="js/highcharts-more.js" type="text/javascript"></script>
<script src="js/moment.min.js" type="text/javascript"></script>
<script src="js/jquery.circliful.min.js" type="text/javascript"></script>
<script src="js/fullcalendar.min.js" type="text/javascript"></script>
<script src="js/jquery.vmap.min.js" type="text/javascript"></script>
<script src="js/jquery.downCount.js" type="text/javascript"></script>
<script src="js/jquery.bootstrap-touchspin.min.js" type="text/javascript"></script>
<script src="js/jquery.formtowizard.js" type="text/javascript"></script>
<script src="js/form-validator.min.js" type="text/javascript"></script>
<script src="js/form-validator-lang-en.min.js" type="text/javascript"></script>
<script src="js/cropbox-min.js" type="text/javascript"></script>
<script src="js/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="js/ion.rangeSlider.min.js" type="text/javascript"></script>
<script src="js/jquery.poptrox.min.js" type="text/javascript"></script>
<script src="js/styleswitcher.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    'use strict';

    Highcharts.chart('chrt1', {
        colors: ['#f7f7f7','#ece5e4'],
        chart: {
            type: 'area',
            backgroundColor: "#FFFFFF",
            borderColor: "#335cad"
        },
        legend: {
            enabled: false
        },
        title: {
            style: {
                    display: 'none'
                }
        },
        xAxis: {
            categories: ['2010', '2011', '2012', '2013', '2014', '2015', '2016']
        },
        credits: {
            enabled: false
        },
        tooltip: {
            pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
        },
        legend: {
          align: 'right',
          verticalAlign: 'top',
          itemStyle: {
            color: '#555555',
            fontSize: '13px',
            fontWeight: '300'
          },
       },      
        plotOptions: {
            area: {
                categories: ['1', '2', '3', '4', '5', '6', '7'],
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name: 'Site A View',
            data: [18,45,35,10,85,25,90]
        }, {
            name: 'Site B View',
            data: [45,50,25,85,55,65,70]
        }]
    });

    Highcharts.chart('chart2', {

        chart: {
            polar: true
        },

        title: {
            text: null
        },

        pane: {
            startAngle: 0,
            endAngle: 360
        },

        xAxis: {
            tickInterval: 45,
            min: 0,
            max: 360,
            labels: {
                formatter: function () {
                    return this.value + '°';
                }
            }
        },

        yAxis: {
            min: 0
        },

        plotOptions: {
            series: {
                pointStart: 0,
                pointInterval: 45
            },
            column: {
                pointPadding: 0,
                groupPadding: 0
            }
        },
        legend: {
          align: 'right',
          verticalAlign: 'top',
          itemStyle: {
            color: '#555555',
            fontSize: '13px',
            fontWeight: '300'
          },
       }, 
        series: [{
            type: 'column',
            name: 'Column',
            data: [8, 7, 6, 5, 4, 3, 2, 1],
            pointPlacement: 'between'
        }, {
            type: 'line',
            name: 'Line',
            data: [1, 2, 3, 4, 5, 6, 7, 8]
        }, {
            type: 'area',
            name: 'Area',
            data: [1, 8, 2, 7, 3, 6, 4, 5]
        }]
    });

    //===== To DO List Add Task Field =====//
    $('.to-do-tp > a').on('click', function(){
        $(this).next('div.add-tsk').slideToggle();
        return false;
    });

    //===== To Do List =====//
    $('.td-lst > li').on('click', function () {
        $(this).toggleClass('completed');
        return false;
    });

    //===== To Do List Deleted =====//
    $('.td-lst > li > a').on('click', function () {
        $(this).parent('li').slideUp();
        return false;
    });

    $('.add-tsk form > button').on('click', function () {
        var task_list = $('ul.td-lst');
        var task_item = $('.add-tsk form > input').val();
        var date = new Date();
        var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul",
        "Aug","Sep","Oct","Nov","Dec"];
        var current_date = date.getDate()+' '+months[date.getMonth()]+' '+date.getFullYear();
        if (task_item !== '' && task_item !== 'undefined') {
            $(task_list).prepend('<li><h5>' + task_item + '</h5> <span><i class="ion-ios-stopwatch"></i>' + current_date + '</span> <a href="#" title=""><i class="ion-android-delete"></i></a></li>');
            $('.td-lst > li').on("click", function () {
                $(this).toggleClass('active');
            });
            $('.add-tsk form > input').addClass('null');
            $('.add-tsk form > input').val('');
            $('.add-tsk form > input').focus();
            var attribute = $("ul.td-lst").children('li').eq(0).children('i');
            return false;
        }
    });

    //===== Circliful =====//
    if ($.isFunction($.fn.circliful)) {
        $('#circl-prg').circliful({
            animation: 1,
            animationStep: 3,
            foregroundBorderWidth: 5,
            backgroundBorderWidth: 5,
            percent: 66,
            textSize: 35,
            foregroundColor: '#50b8aa',
            backgroundColor: "#96d5f7",
            textStyle: 'font-size: 20px;',
            textColor: '#555555',
        });
    }

    //===== Full Calendar =====//
    if ($.isFunction($.fn.fullCalendar)) {
        $('#calendar').fullCalendar({
            header: {
                left: 'prev',
                center: 'title',
                right: 'next'
            },
            height: 530,
            defaultDate: '2017-09-12',
            editable: true,
            eventLimit: true,
            events: [
                {
                    title: 'Long Event...',
                    start: '2017-09-04'
                },
                {
                    title: 'Repeating Event',
                    start: '2017-09-09',
                    end: '2017-09-10'
                },
                {
                    title: 'Word Show...',
                    start: '2017-09-21'
                }
            ]
        });
    }

    $('.grid-item').draggable();
});
</script>
</body>
</html>
